<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多文章了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          :title="item.title"
          @click="$router.push(`/articledetail/${item.art_id}`)"
        >
          <!-- 自定义内容 -->
          <template #label>
            <van-grid :border="false" :column-num="item.cover.images.length">
              <van-grid-item
                v-for="(img, index) in item.cover.images"
                :key="index"
              >
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>
            <div class="content">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdata | rTime }}</span>
              <!-- 关闭按钮 -->
              <span
                class="close"
                v-if="$store.state.token"
                @click="openPop(item.art_id)"
              >
                <van-icon name="cross" />
              </span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
// 引入获取文章列表接口
import { getChanArticle } from "@/api/article.js";
// 引入事件格式化插件
// import moment from "moment";
export default {
  props: {
    channel_id: {
      type: Number
    }
  },
  data() {
    return {
      list: [],
      loading: false, //默认加载完成
      finished: false, //默认数据没有全部加载完
      refreshing: false,
      timestamp: null //系统返回的时间戳
    };
  },
  // filters: {
  //   getTime(time) {
  //     return moment(time).format("HH") + "小时以内";
  //   }
  // },
  methods: {
    // 获取频道对应的文章列表
    async pullArticle() {
      try {
        const res = await getChanArticle({
          channel_id: this.channel_id,
          timestamp: this.timestamp || Date.now(),
          with_top: 1
        });
        console.log(res);
        // 把系统返回的时间戳保存到data中，下次再请求时使用系统返回的时间戳作为参数，实现更新
        this.timestamp = res.data.data.pre_timestamp;
        // console.log("系统返回的时间戳",this.timestamp);
        // 当成功获取到数据后，设置给list
        this.list.push(...res.data.data.results);
        // 因为每次onload事件触发，loading就会被改为true，
        // 我们成功获取数据并显示到页面后，要更改loading的值
        // 更改loading的值，停止显示加载中。。
        this.loading = false;
        if (res.data.data.results.length === 0) {
          // 如果后台数据返回完了，没有文章了，不再加载了，显示没有文章了
          this.finished = true;
          return;
        }
      } catch (err) {
        console.log(err);
        this.finished = true;
      }
    },
    onLoad() {
      //滚动条滚动自动触发onload事件
      this.pullArticle();
    },
    // 下拉刷新
    async onRefresh() {
      this.finished = false;
      this.loading = true;
      try {
        const res = await getChanArticle({
          channel_id: this.channel_id,
          timestamp: Date.now(),
          with_top: 1
        });
        // 将后台返回的最新数据添加到list的最前面，达到显示最新的数据
        this.list.unshift(...res.data.data.results);
        this.$toast.success("刷新成功");
        this.loading = false;
        // 停止刷新
        this.refreshing = false;
      } catch (err) {
        console.log(err);
        this.refreshing = false;
        this.$toast.fail("刷新失败");
      }
    },
    // 在这里调用父组件index.vue的方法实现打开弹层
    openPop(art_id) {
      // console.log(art_id);
      this.$emit("openP", art_id.toString());
    },
    // 删除list对应的文章数据
    delArticle(channelID, articleID) {
      // console.log(1111);
      // console.log(channelID,articleID);
      // 判断一下传过来的频道id和当前显示的频道id是否一致，一直的话才继续删除
      if (channelID === this.channel_id) {
        // 获取到当前文章对象所在的下标
        const index = this.list.findIndex(item => {
          // item代表数组中的每一项
          return (item.art_id = articleID);
        });
        // console.log("当前步子换文章的下标",index);
        // 删除不喜欢文章
        this.list.splice(index, 1);
      }
    }
  },
  mounted() {
    this.$eventBus.$on("delArt", (channelID, articleID) => {
      // console.log(3333);
      this.delArticle(channelID, articleID);
    });
  }
};
</script>

<style lang="less" scoped>
.content {
  span {
    margin-right: 5px;
  }
  .close {
    margin-left: 140px;
  }
}
</style>
